$(function () {
    let xbox = document.querySelectorAll('.tabb')
    let li = document.querySelectorAll('.idbox ul li')
    let index = 0
    for (let i = 0; i < li.length; i++) {
        li[i].addEventListener('mouseover', function () {

            li[index].classList.remove('on')
            li[i].classList.add('on')

            xbox[index].classList.remove('onne')
            xbox[i].classList.add('onne')
            index = i
        })

    }

let del=document.querySelector('#del')
let inp=document.querySelector('.inp')
inp.addEventListener('input',function(){
    val=inp.value
    if(val.length>0){
        del.style.display='block'; 
    }else{
        del.style.display='none'; 
    }
})
del.addEventListener('click',function(){
    inp.value=''
    del.style.display='none';  
})
})